<template>
	<!-- 
		接受两个参数：
			num：为传过来的商品初始数量
			RemainingTaiwan：为剩余的商品数量
		接受一个回调事件：
			changeNum：改变数量的回调函数
	 -->
	<van-stepper v-model="quantity" :integer="true" :max="props.RemainingTaiwan" @plus="addNum" @minus="subNum"
		@blur="blurNum" @keyup.enter="blurNum" />
</template>

<script setup lang="ts">
	import { watch } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const props = defineProps({
		num: Number,
		RemainingTaiwan: Number
	})
	const emit = defineEmits(['changeNum'])
	let quantity = props.num!
	watch(() => store.state.showBottom, (val, old) => {
		// console.log(val, old)
		if (val === false) {
			emit('changeNum', quantity = 1)
		}
	})
	const addNum = () => {
		// if (quantity >= props.RemainingTaiwan) {
		// 	quantity = props.RemainingTaiwan
		// 	console.log(quantity)
		// } else {
		// 	quantity + 1
		// 	console.log(quantity)
		// }
		emit('changeNum', quantity + 1)
	}
	const subNum = () => {
		if (quantity - 1 <= 0) return
		emit('changeNum', quantity - 1)
	}
	// 输入框失去了焦点，把数量传输过去
	const blurNum = () => {
		emit('changeNum', quantity)
	}
	// const changeNum = () => {
	// 	emit('changeNum', quantity)
	// }
</script>

<style lang="scss" scoped>
	::v-deep .van-haptics-feedback {
		background-color: #878888 !important;
		color: #fff !important;
	}
</style>